<script setup lang="ts">
import { ref } from 'vue'

// 定义props
const props = defineProps<{
  text: string
  buttonText?: string
}>()

// 存储复制的文本用于显示
const copiedText = ref('')
const copyTimestamp = ref<Date | null>(null)

// 复制到剪贴板
const copyToClipboard = () => {
  navigator.clipboard.writeText(props.text)
    .then(() => {
      // 更新显示的复制文本
      copiedText.value = props.text
      copyTimestamp.value = new Date()
      console.log('复制到剪贴板的文本:', props.text)
    })
    .catch(err => {
      console.error('复制失败:', err)
    })
}
</script>

<template>
  <div>
    <!-- 提交按钮 -->
    <button 
      @click="copyToClipboard"
      class="mt-8 mx-auto block px-10 py-3 bg-gradient-to-r from-blue-500 to-blue-700 text-white font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition"
    >
      {{ buttonText || '一键复制到剪贴板' }}
    </button>
    
    <!-- 显示复制的文本内容 -->
    <div v-if="copiedText" class="mt-6 p-4 bg-gray-50 border border-gray-200 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold text-gray-700 mb-2">
        已复制到剪贴板（{{ copyTimestamp?.toLocaleString('zh-CN') }}）：
      </h3>
      <p class="text-gray-800 whitespace-pre-wrap break-words">{{ copiedText }}</p>
    </div>
  </div>
</template>

<style scoped>
button {
  transition: all 0.3s ease;
}

button:hover {
  opacity: 0.9;
}

button:active {
  transform: translateY(0);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
</style>